<template>
    <div>
        <div class="search">
            <el-select
                v-model="input"
                filterable
                clearable
                remote
                @clear = 'clear'
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="searchChange"
                :loading="loading">
                <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item" 
                     >
                </el-option>
            </el-select>
            <!-- //!搜索按钮 -->
            <el-button type="primary" icon="el-icon-search" class="is-plain" @click=upData></el-button>
            <!-- //!添加项目 -->
            <el-button type="primary" @click='showDialog'>添加项目</el-button>
            <!-- //!  Dialog弹框 -->
            <Dialog :visible='dialogVisible' @closeDialog=closeDialog  @submit='submit' ref='dialog'></Dialog>
        </div>
        <!-- //!班级选择 -->
        <div class="select-class">
          <el-form>
                <span>选择班级：</span>
                 <el-select 
                v-model="value" 
                filterable
                clearable
                @clear = 'clear'
                @visible-change="selectClass(value)"
                :loading="loading2"
                placeholder="请选择" >
                    <el-option
                    v-for="item in classOptions"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
          </el-form>
        </div>
        
        <el-button class="excelBut" icon="iconfont icon-excel" plain> 导出excel数据</el-button>
        <div class="stutable" >
             <el-table
                :data="tableData"
                v-loading='tableFlag'
                border
                style="width: 100%">
                <el-table-column
                    prop="headimgurl"
                    label="头像"
                    width="100">
                    <template v-slot='{ row }'>
                        <img :src="row.headimgurl" alt="" width="60px">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="degree"
                    label="学历">
                </el-table-column>
                <el-table-column
                    prop="class"
                    label="班级">
                </el-table-column>
                <el-table-column
                    prop="productUrl"
                    label="项目">
                </el-table-column>
                <el-table-column
                    prop="cTime"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop
                    label="操作">
                    <template v-slot ='{ row }'>
                        <el-button type="primary"  icon='el-icon-view' >查看</el-button>
                        <el-button type="primary"  icon='el-icon-edit' @click='formEdit(row)' >编辑</el-button>
                        <el-button type="danger"  icon='el-icon-delete'  @click='del(row)' ref='del'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
            background
            layout="prev, pager, next"
            @current-change = 'changePage'
            :pageSize = 'pageSize'
            :total=total>
        </el-pagination>
    </div>
</template>

<script>
    import Dialog from '@/components/Dialog'
    import * as api from '@/api/student'
  export default {
    components:{
        Dialog
    },
    meta:{
        title:'xyxmgl',
        name:'学员项目',
        icon:'iconfont icon-shangpinguanli',
        
    },
    
    data() {
        return {
            input: '',          ////  搜索框下拉后选中拿到的值
            options: [],        ////搜索框的下拉框
            dialogVisible:false,
            tableData:[],       ////  具体数据
            tableFlag:true,     ////  具体数据loading开关
            total:0,
            pageSize:0,
            loading:false,
            value:[],       ////  班级选择框选中后拿到的值
            classOptions:[], ////  班级选择框的下拉框
            loading2:false,
            Page:'',


        }
    },
    methods:{
        exportExcel(){

        },
        showDialog(){
            this.dialogVisible = true
        },
        closeDialog(){
            this.$refs.dialog.form = {}
            this.$refs.dialog.fileList = []
            this.dialogVisible = false
        },
        ////提交数据到后台
        submit(input){
            let dialogTitle = this.$refs.dialog.title
            console.log(dialogTitle);
            if(dialogTitle === '添加学员信息'){
                api.addStudent(input)
                .then(res=>{
                    // console.log('sub',res);
                })
            }else if(dialogTitle === '编辑学员信息'){
                api.changeStu(input)
                .then(res=>{
                    console.log(res);
                    if(res.data.state){
                        this.getStu()
                    }
                })
            }
            
            this.dialogVisible = false
        },
        ////获取页面数据
        getStu( page = 1, count = 8, classes){
             api.getStuApi(page,count,classes)
            .then(res=>{
                console.log(res);
                if(res.data.state){
                    this.tableFlag = false
                }
                this.tableData = res.data.data
                this.total = res.data.total
                this.pageSize = count;
            })
        },
        ////分页
        changePage(pageSize){
            if(!this.input){
                ////判断有没有输入内容
                this.getStu(pageSize)
            }else if(this.input){
                this.searchChange(this.input,8,pageSize)
            }
            
        },
        ////学员信息编辑
        formEdit(row){
            ////编辑信息的时候先要数据回显
            console.log(this.$refs.dialog);
            this.$refs.dialog.title = '编辑学员信息'         
            this.$refs.dialog.form = {...row}  
            this.dialogVisible = true
            this.$refs.dialog.fileList = [{url:row.headimgurl}]
            console.log('信息',this.$refs.dialog);
        },
        ////删除数据
        del(row){
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.delStu(row.sId)
                .then(()=>{
                    this.getStu()

                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        ////搜索框
        searchChange(query, conut = 8 , Page){
            ////query是输入框中的值
            if(query !== ''){
                this.input = query
                this.loading = true
                ////防抖
                setTimeout(()=>{
                    this.loading = false
                    api.search(query,conut,Page)
                    .then(res=>{
                        console.log('pageSize',Page);
                        console.log('111',res);
                        this.total = res.data.total
                        this.tableData = res.data.data
                        let arr=[]
                        res.data.data.forEach(item=>{
                            arr.push(item.name)
                        })
                        // console.log('arr',arr);
                        this.options = Array.from(new Set(arr))
                    },1000)
                    
                }) 
                
            }
        },
        ////班级选择框
        selectClass(value){
            // console.log('123');
            api.search()
            .then(res=>{
                // console.log('class',res);
                ////对获取到的所有数据进行遍历，拿到所有数据的class属性并且进行去重
                let newArr = []
                res.data.data.forEach(item => {
                    newArr.push(item.class)
                });
                this.classOptions = Array.from(new Set(newArr))
                // console.log('class',this.classOptions);
                if(value){
                    ////用去重过后的class代入原数据筛选出具体的信息
                    this.tableData = res.data.data.filter(item=>{
                        return item.class === value
                    })
                    this.total = Math.ceil(this.tableData.length%8)
                }
                
            })
            console.log(value);
        },
        clear(){
            ////清除输入框更新视图
            this.getStu()
        },
        upData(){
            console.log(this.input);
            api.search(this.input)
            .then(res=>{
                this.tableData = res.data.data
            })
        }
        
    },
    mounted(){
        this.getStu()
        // if(this.tableData){
        //     this.list = this.tableData.map(item => {
        //         return { value: `value:${item}`, label: `label:${item}` };
        //     });
        // }
        
    },
    
  }
</script>

<style lang='less' scoped>
    .excelBut{
        float: right;
        margin-bottom: 10px;
        /deep/.iconfont{
            color: green !important;
        }
    }
    .search{
        text-align: left;
        line-height: 40px;
        margin: 20px 0;
        .el-select{
            display: inline-block;
        }
        .is-plain{
            color: #409eff;
            background: #ecf5ff;
            
        }
        .is-plain:hover{
            background:#409eff;
            color: white;
            border-color: #b3d8ff;
        }
    }
    .select-class{
        line-height: 40px;
        text-align: left;
        margin-bottom: 20px;
    }
    .stutable{
        line-height: 40px;
        /deep/.cell{
            .el-button{
                width: 65px;
                height: 25px;
                padding-left: 10px;
                padding-top:5px;
            }
            text-align: center;
        }
        /deep/.el-table__header-wrapper{
            text-align: center;
        }
    }
</style>

